<script setup>
import { reactive} from 'vue'
  import {useRouter} from 'vue-router'
 import {login} from '@/api/user'
 import usetoken from '@/stores/token.js'
 const router = useRouter()

const loginFprm = reactive({
  username:'demo',
  password:'zh@hm#23',
  isAgree:false

})
  const onFinish =async (values) => {
    console.log(values)
    const {updateToken} = usetoken()
   const res=  await login({username:loginFprm.username,password:loginFprm.password})
   console.log(res)
   updateToken(res.data.token)
     router.push("/")
    };
const validatorisAgree = (rule,value) =>{
   return value?  Promise.resolve() :Promise.reject(new Error('您必须同意用户协议'))

}
// const isok = ()=>{
//   console.log(11)
// }


</script>
<template>
  <div class="login-container">
    <div class="logo">
      <div class="icon"></div>
      <img src="@/assets/common/login-bg.svg" width="300px" alt="" />
    </div>
    <div class="form">
      
      <a-card class="login-card">
        <a-form @finish='onFinish' autocomplete="off" :model="loginFprm" :label-col="{span: 4}" labelAlign='top' :colon = 'false'>
          <a-form-item class="loginFormitem" :wrapperCol="{offset:1}" style="margin-buttom:50px;" >
            <h3>智慧园区-登录</h3>
          </a-form-item>
          <a-form-item 
          name='username'
          label='账号' 
          class="loginFormitem"
          :rules =" [{required:true,message: '请输入账号' ,trigger:'blur'}]"
          >
            <a-input v-model:value='loginFprm.username'></a-input>
          </a-form-item>
          <a-form-item label='密码'
          name='password'
          :rules =" [{required:true,message: '请输入密码' ,trigger:'blur'}]"
           >
            <a-input-password v-model:value='loginFprm.password'></a-input-password >
          </a-form-item>
          <a-form-item  :wrapperCol="{offset:4}" :rules="[{validator:validatorisAgree}]"  name='isAgree'>
        <a-checkbox v-model:checked ='loginFprm.isAgree' >记住我</a-checkbox>
      </a-form-item>
      <a-form-item class="loginOk" :wrapperCol="{offset:4}">
        <a-button type="primary" htmlType="submit" style="width:230px;" >登录</a-button>
      </a-form-item>

        </a-form>

      
      </a-card>
    </div>
  </div>
</template>

<style lang="less">
.login-container {
  display: flex;
  align-items: stretch;
  height: 100vh;
  .logo {
    flex: 3;
    background: rgba(38, 72, 176) url(../../assets/common/login-bg.svg) no-repeat center / cover;
    border-top-right-radius: 60px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    padding: 0 100px;
    .icon {
      background: url() no-repeat 70px center / contain;
      width: 300px;
      height: 50px;
      margin-bottom: 50px;
    }
    p {
      color: #fff;
      font-size: 18px;
      margin-top: 20px;
      width: 300px;
      text-align: center;
    }
  }
  .form {
    flex: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 50px;
    .loginFormitem{
      margin-bottom: 50px;
    }
    
    .ant-card {
      width: 320px;
      border: none;
      padding: 0;
    }
    h3 {
      padding-left: 30px;
      font-size: 24px;
    }
  }
}


</style>
